<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="<c:url value="/css/style.css" />" rel="stylesheet"
	type="text/css" media="screen" />
<title>計算食物熱量</title>

<style type="text/css">

#page1{
 	width:650px;
 	height:620px;
 	background:#FFF5EE;
 	border-radius:45px;
 	-moz-border-radius:45px;
 	-webkit-border-radius:45px;
 	margin: 0 auto;
	padding: 0;
	border-width:rough;
	border-style:dashed;
	border-color:#EE7700;
 	}
 #td1{
 border:3;
 }	
 .orange {  
    color: #fef4e9;
    border-radius:15px;
 	-moz-border-radius:15px;
 	-webkit-border-radius:15px;  
    border: solid 1px #da7c0c;  
    background: #f78d1d;  
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));  
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');  
}  
.orange:hover {  
    background: #f47c20;  
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));  
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');  
}  
.orange:active {  
    color: #fcd3a5;  
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));  
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');  
}  
 
 
</style>

<script src="<c:url value="/js/jquery-1.9.1.min.js" />"></script>
<script type="text/javascript">
$(function(){
	$('#reset').click(function(){
	 	$('#selected1').empty();
    });
	
})

	function isFilled(a) {
		if (a.value == "" || a.value == null) {
			return false;
		} else {
			return true;
		}
	}

	function isNum(x) {
		var testnum = x.value + "";
		var flag = 0;
		if (testnum.length = 1 && testnum == ".")
			return false;
		for ( var i = 0; i < testnum.length; i++) {

			if (testnum.charAt(i) < "0" || testnum.charAt(i) > "9") {
				if (testnum.charAt(i) == ".") {
					flag += 1;
				} else {
					return false;
				}
			}
			if (flag > 1)
				return false;
		}
		return true;
	}

	function ro(x) {
		x = Math.round(x * 100) / 100;
		return x;
	}

	function calculateBEE(CalculationForm) {
		if (CalculationForm.gender2[0].checked) {
			if (document.CalculationForm.age.selectedIndex == 0) {
				CalculationForm.Basicmetabolic.value = ro((60.9 * CalculationForm.weight3.value) - 54);
			} else if (document.CalculationForm.age.selectedIndex == 1) {
				CalculationForm.Basicmetabolic.value = ro((22.7 * CalculationForm.weight3.value) - 495);
			} else if (document.CalculationForm.age.selectedIndex == 2) {
				CalculationForm.Basicmetabolic.value = ro((17.5 * CalculationForm.weight3.value) + 651);
			} else if (document.CalculationForm.age.selectedIndex == 3) {
				CalculationForm.Basicmetabolic.value = ro((15.3 * CalculationForm.weight3.value) + 679);
			} else if (document.CalculationForm.age.selectedIndex == 4) {
				CalculationForm.Basicmetabolic.value = ro((11.6 * CalculationForm.weight3.value) + 879);
			} else if (document.CalculationForm.age.selectedIndex == 5) {
				CalculationForm.Basicmetabolic.value = ro((13.5 * CalculationForm.weight3.value) + 487);
			}
		} else {
			if (document.CalculationForm.age.selectedIndex == 0) {
				CalculationForm.Basicmetabolic.value = ro((61 * CalculationForm.weight3.value) - 51);
			} else if (document.CalculationForm.age.selectedIndex == 1) {
				CalculationForm.Basicmetabolic.value = ro((22.5 * CalculationForm.weight3.value) + 499);
			} else if (document.CalculationForm.age.selectedIndex == 2) {
				CalculationForm.Basicmetabolic.value = ro((12.2 * CalculationForm.weight3.value) + 746);
			} else if (document.CalculationForm.age.selectedIndex == 3) {
				CalculationForm.Basicmetabolic.value = ro((14.7 * CalculationForm.weight3.value) + 496);
			} else if (document.CalculationForm.age.selectedIndex == 4) {
				CalculationForm.Basicmetabolic.value = ro((8.7 * CalculationForm.weight3.value) + 829);
			} else if (document.CalculationForm.age.selectedIndex == 5) {
				CalculationForm.Basicmetabolic.value = ro((10.5 * CalculationForm.weight3.value) + 596);
			}
		}
	}

	function Valid(CalculationForm) {
		if (isFilled(CalculationForm.weight3) == false) {
			alert("請輸入體重!");
			CalculationForm.weight3.focus();
			return false;
		}
		if (isNum(CalculationForm.weight3) == false) {
			alert("請輸入數字(體重)!");
			CalculationForm.weight3.focus();
			return false;
		}
		calculateBEE(CalculationForm);
	}

	var kcal = 0;
	var sitem = "";
	var total = "";
	function add_count(s_item) {
		var tmp = "";
		var pos1 = 0;
		var pos2 = 0;
		for ( var poscount = 0; poscount < s_item.length; poscount++) {
			tmp = s_item.charAt(poscount);
			if (tmp == "(") {
				pos1 = poscount + 1;
			} else if (tmp == ")") {
				pos2 = poscount;
			}
		}
		kcal = kcal + parseInt(s_item.substring(pos1, pos2));
		return kcal;
	}
	function Heatx(form) {
		sitem = (form.selected_display.options[form.selected_display.selectedIndex].value);
		if (form.selected_display.selectedIndex != 0) {
			form.Heat.value = Re_enter(sitem);
			form.selected_display.options[form.selected_display.selectedIndex] = null;
		}
	}
	function Re_enter(s_item) {
		var tmp = "";
		var pos1 = 0;
		var pos2 = 0;
		for ( var poscount = 0; poscount < s_item.length; poscount++) {
			tmp = s_item.charAt(poscount);
			if (tmp == "(") {
				pos1 = poscount + 1;
			} else if (tmp == ")") {
				pos2 = poscount;
			}
		}
		kcal = kcal - parseInt(s_item.substring(pos1, pos2));
		return kcal;
	}
	function Heat1(form) {
		sitem = (form.Calories1.options[form.Calories1.selectedIndex].value);
		food = new Option(sitem, sitem);
		form.selected_display.options[form.selected_display.length] = food;
		form.Heat.value = add_count(sitem);
		form.Calories1.selectedIndex = 0;
	}
	function Heat2(form) {
		sitem = (form.Calories2.options[form.Calories2.selectedIndex].value);
		food = new Option(sitem, sitem);
		form.selected_display.options[form.selected_display.length] = food;
		form.Heat.value = add_count(sitem);
		form.Calories2.selectedIndex = 0;
	}
	function Heat3(form) {
		sitem = (form.Calories3.options[form.Calories3.selectedIndex].value);
		food = new Option(sitem, sitem);
		form.selected_display.options[form.selected_display.length] = food;
		form.Heat.value = add_count(sitem);
		form.Calories3.selectedIndex = 0;
	}
	function Heat4(form) {
		sitem = (form.Calories4.options[form.Calories4.selectedIndex].value);
		food = new Option(sitem, sitem);
		form.selected_display.options[form.selected_display.length] = food;
		form.Heat.value = add_count(sitem);
		form.Calories4.selectedIndex = 0;
	}
	function Heat5(form) {
		sitem = (form.Calories5.options[form.Calories5.selectedIndex].value);
		food = new Option(sitem, sitem);
		form.selected_display.options[form.selected_display.length] = food;
		form.Heat.value = add_count(sitem);
		form.Calories5.selectedIndex = 0;
	}
	function Heat6(form) {
		sitem = (form.Calories6.options[form.Calories6.selectedIndex].value);
		food = new Option(sitem, sitem);
		form.selected_display.options[form.selected_display.length] = food;
		form.Heat.value = add_count(sitem);
		form.Calories6.selectedIndex = 0;
	}

</script>

</head>
<body>
	<!-- 引入共同的頁首 -->
	<c:set var="funcName" value="IND" scope="session" />
	<jsp:include page="/top/top.jsp" />

	<!-- 從這裡開始寫 -->
<div id="page1">
	<div style="margin:20px 0px 0px 0px"></div>
	<center>
		<b><font style="font-size:0.7cm;margin:20px 0px 0px 0px">熱量試算表</font></b>
	</center><br>

	<center>
		<form method="post" action="" name="CalculationForm">
			<table border="0" cellspacing=0 width="450">
				<tr>
					<td>
						<div align="right">
							<b><font color="#2523D7" size="3px"> 性　　　別 ：</font></b>
						</div>
					</td>
					<td><font size="3px"> <input type="radio" name="gender2"
							value="male"> 男 <input type="radio" name="gender2"
							value="female" checked> 女
					</font></td>
				</tr>
				
				<tr>
					<td>
						<div align="right">
							<b><font color="#2523D7" size="3px"> 身　　　高 ：</font></b>
						</div>
					</td>
					<td><font size="3px"><input type="text" size="5" name="Height"> 公分</font></td>
				</tr>

				<tr>
					<td>
						<div align="right">
							<b><font color="#2523D7" size="3px"> 體　　　重 ：</font></b>
						</div>
					</td>
					<td><font size="3px"> <input type="text" size="5" name="weight3">
							公斤
					</font></td>
				</tr>

				<tr>
					<td>
						<div align="right">
							<b><font color="#2523D7" size="3px"> 年　　　齡 ：</font></b>
						</div>
					</td>
					<td><font size="3px"> <select name="age">
								<option value="0">0-3</option>
								<option value="1">3-10</option>
								<option value="2">10-18</option>
								<option value="3">18-30</option>
								<option value="4">30-60</option>
								<option value="5">60</option>
						</select>
						 <input type="button" class="button orange" name="beebutton1" value="計算"
							onClick="Valid(CalculationForm);">
							      <input type="reset" class="button orange" name="reset" value="重新輸入">
					</font></td>
				</tr>

				<tr>
					<td>
					<div align="right">
					<b><font color="#2523D7" size="3px">基本代謝率 ：</font></b>
					</div>
					</td>
					<td><font size="3px"> <input type="text" name="Basicmetabolic"
							onFocus="this.blur();" style="background: #EBEBC4" size="10">
							卡路里
					</font></td>
				</tr>
				<tr>
					<td></td>
				</tr>
			</table>
		</form>
	</center><br><br>
	

	<center>
		<form action="" method="post">
			<table border="0" width="450" cellpadding="2" cellspacing="0">
				<tr>
					<td><b><font size="3">水果類 </font></b></td>
					<td><b><font size="3">蛋豆魚肉類 </font></b></td>
				</tr>
				<tr>
					<td><select name="Calories1"
						onChange="Heat1(this.form)" style="width: 172px">
							<option value=0>-- 請選擇 --</option>
							<option value=柑橘1個(60)>柑橘1個(60)</option>
							<option value=柳丁1個(60)>柳丁1個(60)</option>
							<option value=蘋果1個(60)>蘋果1個(60)</option>
							<option value=柿子1個(60)>柿子1個(60)</option>
							<option value=桃子1個(60)>桃子1個(60)</option>
							<option value=椪柑1個(120)>椪柑1個(120)</option>
							<option value=芭樂1個(120)>芭樂1個(120)</option>
							<option value=柚子1個(120)>柚子1個(120)</option>
							<option value=香瓜1個(120)>香瓜1個(120)</option>
							<option value=梨子1個(120)>梨子1個(120)</option>
							<option value=木瓜1個(360)>木瓜1個(360)</option>
							<option value=哈密瓜1個(360)>哈密瓜1個(360)</option>
							<option value=小玉西瓜1個(360)>小玉西瓜1個(360)</option>
							<option value=香蕉1個(120)>香蕉1個(120)</option>
							<option value=棗子1個(30)>棗子1個(30)</option>
							<option value=蓮霧1個(30)>蓮霧1個(30)</option>
							<option value=草莓1個(7)>草莓1個(7)</option>
							<option value=葡萄1個(5)>葡萄1個(5)</option>
					</select></td>
					
					<td><select name="Calories2"
						onChange="Heat2(this.form)" style="width: 172px">
							<option value=0>-- 請選擇 --</option>
							<option value=雞蛋1個(55)>雞蛋1個(55)</option>
							<option value=傳統豆腐1塊(55)>傳統豆腐1塊(55)</option>
							<option value=清豆漿1杯(75)>清豆漿1杯(75)</option>
							<option value=魚肉1兩(75)>魚肉1兩(75)</option>
							<option value=瘦豬肉1兩(75)>瘦豬肉1兩(75)</option>
							<option value=牛肉1兩(75)>牛肉1兩(75)</option>
							<option value=羊肉1兩(75)>羊肉1兩(75)</option>
							<option value=去皮雞1兩(75)>去皮雞1兩(75)</option>
							<option value=去皮鴨1兩(75)>去皮鴨1兩(75)</option>
							<option value=去皮鵝1兩(75)>去皮鵝1兩(75)</option>
							<option value=去皮鴨1兩(75)>去皮鴨1兩(75)</option>
							<option value=豆包1塊(150)>豆包1塊(150)</option>
							<option value=嫩豆腐1塊(110)>嫩豆腐1塊(110)</option>
							<option value=五香豆干1片(28)>五香豆干1片(28)</option>
					</select></td>
					
				</tr>
					
					
					<tr>
					<td><b><font size="3">油脂類 </font></b></td>
					<td><b><font size="3">五穀根莖類 </font></b></td>
					</tr>
				<tr>
					<td><select name="Calories3"
						onChange="Heat3(this.form)" style="width: 172px">
							<option value=0>-- 請選擇 --</option>
							<option value=植物油1茶匙(45)>植物油1茶匙(45)</option>
							<option value=動物油1茶匙(45)>動物油1茶匙(45)</option>
							<option value=蛋黃醬1茶匙(45)>蛋黃醬1茶匙(45)</option>
							<option value=花生醬1茶匙(45)>花生醬1茶匙(45)</option>
							<option value=沙茶醬1茶匙(23)>沙茶醬1茶匙(23)</option>
							<option value=黑芝麻1茶匙(23)>黑芝麻1茶匙(23)</option>
							<option value=白芝麻1茶匙(23)>白芝麻1茶匙(23)</option>
							<option value=奶油1茶匙(23)>奶油1茶匙(23)</option>
							<option value=杏仁果1粒(9)>杏仁果1粒(9)</option>
							<option value=腰果1粒(9)>腰果1粒(9)</option>
							<option value=開心果1粒(5)>開心果1粒(5)</option>
							<option value=花生1粒(5)>花生1粒(5)</option>
							<option value=瓜子1粒(2)>瓜子1粒(2)</option>
					</select></td>
					
					<td><select name="Calories4"
						onChange="Heat4(this.form)" style="width: 172px">
							<option value=0>-- 請選擇 --</option>
							<option value=白飯1碗(280)>白飯1碗(280)</option>
							<option value=糙米飯1碗(280)>糙米飯1碗(280)</option>
							<option value=胚芽米飯1碗(280)>胚芽米飯1碗(280)</option>
							<option value=麵1碗(140)>麵1碗(140)</option>
							<option value=米粉1碗(140)>米粉1碗(140)</option>
							<option value=冬粉1碗(140)>冬粉1碗(140)</option>
							<option value=稀飯1碗(140)>稀飯1碗(140)</option>
							<option value=大饅頭1個(280)>大饅頭1個(280)</option>
							<option value=中型芋頭1個(280)>中型芋頭1個(280)</option>
							<option value=番薯1個(280)>番薯1個(280)</option>
							<option value=馬鈴薯1個(140)>馬鈴薯1個(140)</option>
							<option value=中型玉米1根(140)>中型玉米1根(140)</option>
							<option value=漢堡用麵包1個(140)>漢堡用麵包1個(140)</option>
							<option value=熱狗用麵包1個(140)>熱狗用麵包1個(140)</option>
							<option value=蘇打餅乾1片(24)>蘇打餅乾1片(24)</option>
							<option value=餃子皮1片(24)>餃子皮1片(24)</option>
							<option value=春捲皮1張(35)>春捲皮1張(35)</option>
							<option value=吐司1片(70)>吐司1片(70)</option>
							<option value=小餐包1個(70)>小餐包1個(70)</option>
							<option value=蘿蔔糕1塊(70)>蘿蔔糕1塊(70)</option>
					</select></td>
				</tr>

					<tr>
					<td><b><font size="3">蔬菜類 </font></b></td>
					<td><b><font size="3">奶類 </font></b></td>
					</tr>
				<tr>
					<td><select name="Calories5"
						onChange="Heat5(this.form)" style="width: 172px">
							<option value=0>-- 請選擇 --</option>
							<option value=蔬菜1蝶(25)>蔬菜1蝶(25)</option>
					</select></td>

					<td><select name="Calories6"
						onChange="Heat6(this.form)" style="width: 172px">
							<option value=0>-- 請選擇 --</option>
							<option value=全脂奶類1杯(150)>全脂奶類1杯(150)</option>
							<option value=低脂奶類1杯(120)>低脂奶類1杯(120)</option>
							<option value=脫脂奶類1杯(80)>脫脂奶類1杯(80)</option>
							<option value=優酪乳1杯(120)>優酪乳1杯(120)</option>
							<option value=起司1片(150)>起司1片(150)</option>
							<option value=脫脂奶粉1湯匙(27)>脫脂奶粉1湯匙(27)</option>
							<option value=低脂奶粉1湯匙(40)>低脂奶粉1湯匙(40)</option>
							<option value=全脂奶粉1湯匙(50)>全脂奶粉1湯匙(50)</option>
					</select></td>
				</tr>
			</table>


			<table border="0" width="450" cellpadding="2" cellspacing="0">
				
				<tr>
					<td><select name="selected_display" size="10"
						onChange="Heatx(this.form)" style="width: 400px" id="selected1">
					</select> <br><b><font size="3">你的熱量攝取量： </font></b> <input type="text" style="background:#EBEBC4" name="Heat" value=0
						size=10><b><font size="3">卡路里  </font></b><input type="reset"
							class="button orange"	name="reset" id="reset" value="重新輸入"></td>				
				</tr>

			</table>
		</form>
	</center>
	</div>
	<!-- 寫到這裡結束 -->

	<div id="footer-wrapper">
		<div id="footer">
			<p>
				Copyright (c) 2010 Sitename.com. All rights reserved. Design by <a
					href="http://www.freecsstemplates.org/" rel="nofollow">FCT</a>.
			</p>
		</div>
	</div>
</body>
</html>